<template>
  <!--运行时，这个<div id="app">会代替public/index.html中的空的<div id=="app">-->
  <div id="app">
    <router-view/>
  <template>
  <mt-tabbar v-model="selected" fixed="true" class="l_bao">
  <mt-tab-item id="home">
    <img class="img" slot="icon" src="img/footer/home.png">
    <a>首页</a>
  </mt-tab-item>
  <mt-tab-item id="caipu">
    <img class="img" slot="icon" src="img/footer/caipu.png">
    <a>菜谱</a>
  </mt-tab-item>
  <mt-tab-item id="shicai">
    <img class="img" slot="icon" src="img/footer/shicai.png">
    <a>食材</a>
  </mt-tab-item>
  <mt-tab-item id="video">
    <img class="img" slot="icon" src="img/footer/video.png">
    <a>视频</a>
  </mt-tab-item>
</mt-tabbar>
  
</template>




  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
.l_bao{
  border-top: 1px solid #333;
}
.img{
  width: 22.25px ; 
  height: 22.25px;
}
a{
  font-size: 12px;
  color: #333
}
</style>
